import styled from 'styled-components'
import Controller from '../../component/Controller'
import IconBackWhite from '../../asserts/back_light.svg'
import Bg from '../../asserts/rangking_bg.webp'
import Title from './Title'
import NavigationBar from '../../component/NavigationBar'
import Rank from './Rank'

const Container = styled(Controller)`
    .content {
        height: 100%;
        overflow: hidden;
    }
    
`

const Nav = styled(NavigationBar)`
    position: absolute;
`

const Content = styled.div`
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow: hidden;
`

const Ranking: React.FC = () => {
    return <Container
        imagebackground={Bg}
        contentClassName='content'
    >
        <Content>
            <Nav
                showBack={true}
                backIcon={IconBackWhite}
            />
            <Title />
            <Rank />
        </Content>
    </Container>
}

export default Ranking
